<template>
  <div class="container">
    <h3>找到{{ selected }}</h3>
    <nav>
      <ul>
        <router-link
          tag="li"
          v-for="item in navData"
          :key="item.id"
          :to="item.to"
          @click.native="select(item.name)"
          >{{ item.name }}</router-link
        >
      </ul>
    </nav>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  data() {
    return {
      selected: "",
      navData: [
        { id: 1, name: "单曲", to: "/findSongPage" },
        { id: 2, name: "歌手", to: "/findSingerPage" },
        { id: 3, name: "视频", to: "/findSongVideo" },
      ],
    };
  },
  methods: {
    select(data) {
      console.log(1);
      this.selected = data;
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  margin-left: 20px;
  // 导航开始
  nav {
    margin: 15px 0;
    ul {
      display: flex;
      li {
        margin-right: 35px;
      }
    }
    .router-link-active {
      color: black;
      font-weight: 700;
      font-size: 18px;
      padding-bottom: 5px;
      border-bottom: 4px solid #ec4141;
    }
  }

  // 导航结束
}
</style>